<template>
  <div class="slider" ref="rootRef">
    <div class="slider-group">
      <div class="slider-page"
         v-for="item in sliders"
           :key="item.id">
        <a :href="item.link">
          <img :src="item.pic"/>

        </a>
      </div>
    </div>
    <div class="dots-wrapper">
         <span
           class="dot"
           v-for="(item, index) in sliders"
           :key="item.id"
           :class="{'active': currentPageIndex === index}">
      </span>
    </div>
  </div>
</template>

<script>
import useSlider from './use-slider'
import { ref } from "vue";
export default {
name: "slider",
  props:{
    sliders:{
      type:Array,
      default() {
        return []
      }
    }
  },
  setup(){
    const rootRef = ref(null)
    const { currentPageIndex } = useSlider(rootRef);

    return {
      rootRef,
      currentPageIndex:currentPageIndex
    }
  }
}
</script>

<style lang="scss" scoped>
 .slider {
   min-height: 1px;
   position: relative;
   .slider-group{
     position: relative;
     .slider-page{
       display: inline-block;
       a {
         display: block;
         width: 100%;
       }
       img {
         display: block;
         width: 100%;
       }
     }
   }
   .dots-wrapper{
     position: absolute;
     left: 50%;
     bottom: 12px;
     line-height: 12px;
     transform: translateX(-50%);
     .dot {
       display: inline-block;
       margin: 0 4px;
       width: 8px;
       height: 8px;
       transform: translateZ(1px);
       border-radius: 50%;
       background: $color-text-l;
       &.active {
         width: 20px;
         border-radius: 5px;
         background: $color-text-ll;
       }
     }

   }
 }



</style>
